<script setup>
import { onMounted, ref } from 'vue'
import { MotionComponent } from '@vueuse/motion'
import AntdIcon from '@/components/AntdIcon/index.vue'
import AddGlobal from './components/AddGlobal.vue'
import { globalListApi, deleteGlobalApi } from '@/service'
import { message, Modal } from 'ant-design-vue'

const addGlobalRef = ref()
const globalList = ref([])

const getGlobalList = () => {
  globalListApi().then((res) => {
    globalList.value = res.items
  })
}

const addGlobalSuccess = () => {
  getGlobalList()
}

// 删除选择中加思培
const delGlobal = (id, index) => {
  Modal.confirm({
    title: '删除选择中加思培',
    content: '确认删除该选择中加思培吗？',
    okText: '确认',
    cancelText: '取消',
    onOk: () => {
      deleteGlobalApi({ select_global_id: id }).then(() => {
        globalList.value.splice(index, 1)
        message.success('删除成功')
      })
    },
  })
}
// 显示添加弹窗
const showAddGlobal = (type, record) => {
  if (type === 'add') {
    addGlobalRef.value.open()
  } else {
    const { id, select_global_title, select_global_url, select_global_content } = record
    addGlobalRef.value.open({
      id,
      select_global_title,
      select_global_url,
      select_global_content,
    })
  }
}

onMounted(() => {
  getGlobalList()
})
</script>
<template>
  <div class="flex flex-col gap-5">
    <a-card :bordered="false">
      <a-button type="primary" @click="showAddGlobal('add')">创建选择中加思培</a-button>
    </a-card>
    <MotionComponent preset="slideVisibleOnceRight">
      <a-card :bordered="false">
        <a-table :data-source="globalList" :pagination="false" bordered>
          <a-table-column key="id" title="#" data-index="id" />
          <a-table-column key="select_global_title" title="标题" data-index="select_global_title" />
          <a-table-column key="select_global_url" title="图片" data-index="select_global_url">
            <template #default="{ text: select_global_url }">
              <a-image :src="select_global_url" :width="100" :height="60" />
            </template>
          </a-table-column>
          <a-table-column
            key="select_global_content"
            title="内容"
            data-index="select_global_content"
            width="30%"
          />
          <a-table-column key="create_time" title="创建时间" data-index="create_time" />
          <a-table-column key="action" title="操作">
            <template #default="{ record, index }">
              <div class="flex gap-5">
                <a-button type="primary" @click="showAddGlobal('edit', record)">
                  <template #icon>
                    <AntdIcon icon="EditOutlined" />
                  </template>
                </a-button>
                <a-button type="primary" danger @click="delGlobal(record.id, index)">
                  <template #icon>
                    <AntdIcon icon="DeleteOutlined" />
                  </template>
                </a-button>
              </div>
            </template>
          </a-table-column>
        </a-table>
      </a-card>
    </MotionComponent>
    <AddGlobal ref="addGlobalRef" @addGlobal="addGlobalSuccess" />
  </div>
</template>
